# Component: Newsletter Subscribe

Modal-based lead generation and mailing list management

Marketing Block

### BEM Anatomy

| Type      | Class Name                   | Description                                                                                                                                   |
| --------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-newsletter-subscribe`   | The outer namespace. Encapsulates the modal and internal form logic.                                                                          |
| Element   | `__group-card`               | A custom container for the newsletter category switches (uses `form-control` styling).                                                        |
| Element   | `__field`                    | Wrapper for form inputs. Modifiers identify specific data types (`--email`, `--firstname`).                                                   |
| Element   | `__actions`                  | Absolute-positioned utility area for the modal close button.                                                                                  |
| Element   | `__alert`                    | The feedback container for form submission results.                                                                                           |
| Modifier  | `__alert--header`            | Specific context for the success message shown after a valid submission.                                                                      |
| Modifier  | `__alert--error`             | Specific context for the success message shown after a valid submission.                                                                      |
| Modifier  | `__alert--subscribed`        | Specific context for the success message shown after a valid submission.                                                                      |
| Modifier  | `__alert--no-group-selected` | Warning state triggered when a user attempts to submit without picking at least one newsletter category.                                      |
| Element   | `__field-row`                | A layout wrapper (flex or grid) used to align multiple fields (e.g., Firstname and Lastname) on a single horizontal line.                     |
| Element   | `__field`                    | Wrapper for form inputs. Provides consistent vertical spacing and serves as the anchor for floating labels or icons.                          |
| Modifier  | `__field--groups`            | Specific layout for the interest/category selection area.                                                                                     |
| Modifier  | `__field--firstname`         | Contextual wrapper for the first name input.                                                                                                  |
| Modifier  | `__field--lastname`          | Contextual wrapper for the last name input.                                                                                                   |
| Modifier  | `__field--email`             | Contextual wrapper for the email input; often handles validation icon positioning.                                                            |
| Element   | `__group-card`               | A custom container for the newsletter category/interest switches. Mimics `.form-control` styling to maintain visual harmony with text inputs. |
| Element   | `__switch`                   | The individual toggle or checkbox used within the `__group-card` for selecting specific newsletter topics.                                    |
| Element   | `__button`                   | Base class for interactive triggers within the subscription flow.                                                                             |
| Modifier  | `__button--close`            | Specifically styles the "X" or "Close" button in the `__actions` area.                                                                        |
| Modifier  | `__button--submit`           | Styles the primary action button; usually takes the theme's primary "call to action" color.                                                   |
| Element   | `__submit`                   | The dedicated container or wrapper for the submit button, managing its alignment (e.g., centered or full-width).                              |

### Workflow & UI States

The component transitions between a configuration check (validating if groups exist), a data entry state (the form), and a success state. It uses Bootstrap's `form-floating` for a modern input aesthetic.

##### Generated HTML (Form State)

```html
<div class="as-newsletter-subscribe">
    <div class="as-newsletter-subscribe__form">
        <div class="as-newsletter-subscribe__field as-newsletter-subscribe__field--email form-floating">
            <input type="text" class="form-control" placeholder="..." />
            <label>Your Mail-Address</label>
        </div>
        <div class="as-newsletter-subscribe__submit">
            <button class="as-newsletter-subscribe__button--submit btn btn-primary btn-lg">
                SIGN UP
            </button>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-newsletter-subscribe {
  &__actions {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.25rem;
    
    i { font-size: 2rem; }
  }

  &__field-row {
    // Standardized grid gutters for 
    // names/side-by-side fields
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  &__button--submit {
    width: 100%; // Mobile-first prominence
  }
}
```
